<template>
    <div>
        <!-- 购物车专题 -->
        <CartTips />
        <!-- 商品卡片 -->
        <van-checkbox-group v-model="result" :disabled="!editShow" :label-disabled="!editShow" v-for="item in cartList" :key="item.id">
            <van-checkbox :name="item.product_id">
                <van-swipe-cell>
                    <van-card
                       :num="item.number"
                       :price="item.retail_price.toFixed(2)"
                       :title="item.goods_name"
                       :thumb="item.list_pic_url" 
                       @click = "selsectone(item)"
                     >
                       <template #footer >
                           <!-- 步进器 -->
                          <van-stepper @change="stepperChange(item)" v-model="item.number" v-show="!editShow" integer />
                       </template>
                     </van-card>
                     <template #right>
                             <van-button square text="删除" type="danger" @click="deleteClick(item.product_id)" class="delete-button" />
                     </template>
                </van-swipe-cell>
            </van-checkbox>
        </van-checkbox-group>
         <!-- 提交订单 -->
         <van-submit-bar :price="cartTotal.checkedGoodsAmount*100"  button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="selsctAll" :disabled="!editShow" >全选</van-checkbox>
            <template #tip>
              累计共{{cartTotal.checkedGoodsCount}}件商品，可点击 <van-button @click="editClick" :type="editShow?'primary':'danger'" size="small" >{{editShow?'编辑':'完成编辑'}}</van-button>  按钮进行商品数量修改
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
import {ZGetCartIndex,ZCartCheckedApi,ZCartUpdateApi,ZCartDeleteApi} from "../request/api"
import CartTips from "../components/CartTips.vue"
export default {
    data () {
        return {
            cartList:[], //商品总列表
            cartTotal:{},//购物车数据
            result: [],//复选框 
            editShow:true,//编辑(true 编辑绿色  选框都可以选  步进器隐藏   反之)
            eee:true
        }
    },
    computed:{
     //全选按钮
     selsctAll:{
         //全选按钮初始化状态为选中
        //  this.cartTotal.checkedGoodsCount !== this.cartTotal.goodsCount
         get(){ 
             if(this.cartTotal.goodsCount==0){
                return false
             }else{
                return this.cartTotal.goodsCount ==  this.cartTotal.checkedGoodsCount
             }
         },
         //修改全选按钮状态
         set(val){
          if(this.editShow){
          let myid= []
          this.cartList.map(item=>{
              myid.push(item.product_id)
            })
             //选中商品
             ZCartCheckedApi({
                 isChecked:val?1:0,
                 productIds:myid.join(),
             }).then(res=>{
                 if(res.errno===0){
                    this.requestFn(res.data) 
                    
                 }
             })
          }
         }
     }  
    },
    methods:{
        //订单提交
        onSubmit(){},
        //编辑 更改为完成编辑
        editClick(){
            this.editShow=!this.editShow
        },
        //单选框
        selsectone(item){
            //编辑状态下可以点击单选按钮
            if(this.editShow){
            //选中商品
             ZCartCheckedApi({
                 isChecked:item.checked==1?0:1,
                 productIds:item.product_id,
             }).then(res=>{
                 if(res.errno===0){
                     this.requestFn(res.data);
                 }
             })
            }
            
        },
        //修改步进器
        stepperChange(item){
            ZCartUpdateApi({
                goodsId:item.goods_id,
                id:item.id,
                number:item.number,
                productId:item.product_id
            }).then(res=>{
               if(res.errno===0){
                    this.requestFn(res.data);
               }
            })
        },
        //删除商品
        deleteClick(id){
            ZCartDeleteApi({
                 productIds:id.toString()
            }).then(res=>{
                if(res.errno===0){
                    this.requestFn(res.data);
                    // this.eee=!this.eee
                }
            })
        },
        //封装请求
         requestFn(data){
          let {cartList,cartTotal} = data
             this.cartList = cartList
             this.cartTotal = cartTotal
             this.result=[]
             this.cartList.map(item=>{
                  if(item.checked==1){
                      this.result.push(item.product_id)
                  }
              })
        },

    },
    components:{
        CartTips
    },
    //渲染页面商品
    created(){ 
        //发起请求
        ZGetCartIndex().then(res=>{
            if(res.errno===0){
                this.requestFn(res.data);
            }
        })
    }
}
</script>
 
<style lang = "less" scoped>
    .van-checkbox-group{
       background: #fff; 
       .van-checkbox {
           border-bottom: 1px #ccc solid;
       }
    }
    .van-card__title {
        font-size: 18px;
        margin-top: 15px;
    }
   
    /deep/.van-checkbox__label{
        width: 100%;
        padding: 10px 10px; 
        margin-left: 0;
    }
    .delete-button{
        width: 100%;
        height: 100%;
    }
    .van-submit-bar{
        margin-bottom: 50px;
    }
    /deep/.van-checkbox__icon {
        margin: 0 10px;
    }  
</style>